<template>
    <view class="countdowm">
		<view class="time">{{hourString}}</view>
		<view class="a">:</view>
		<view class="time">{{minuteString}}</view>
		<view class="a">:</view>
		<view class="time">{{secondString}}</view>
	</view>
</template>

<script>
  export default {
    data () {
      return {
        hour: '',
        minute: '',
        second: '',
        promiseTimer: ''
      }
    },
    props: {
      endTime: {    // 倒计时间总秒数
        default: '8999'
      }
    },
    mounted () {
		let nowtimestamp = Date.parse(new Date());
		console.log(nowtimestamp)
		console.log(this.endTime)
		let seconds = (this.endTime - nowtimestamp) 
		console.log(seconds)
      if (seconds > 0) {
        this.hour = Math.floor((seconds / 3600) % 24)
        this.minute = Math.floor((seconds / 60) % 60)
        this.second = Math.floor(seconds % 60)
        this.countDowm()
      }
    },
    methods: {
      countDowm () {
        var self = this
        clearInterval(this.promiseTimer)
        this.promiseTimer = setInterval(function () {
          if (self.hour === 0) {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.second = 0
              self.$emit('countDowmEnd', true)
              clearInterval(self.promiseTimer)
            } else {
              self.second -= 1
            }
          } else {
            if (self.minute !== 0 && self.second === 0) {
              self.second = 59
              self.minute -= 1
            } else if (self.minute === 0 && self.second === 0) {
              self.hour -= 1
              self.minute = 59
              self.second = 59
            } else {
              self.second -= 1
            }
          }
        }, 1000)
      },
      formatNum (num) {
		  if(!num){
			  return '00'
		  }else {
			  return num < 10 ? '0' + num : '' + num
		  }
      }
    },
    computed: {
      hourString () {
        return this.formatNum(this.hour)
      },
      minuteString () {
        return this.formatNum(this.minute)
      },
      secondString () {
        return this.formatNum(this.second)
      }
    }
  }
</script>

<style lang="scss" scoped>
	.countdowm{
		height: 24px;
		line-height: 18px;
		display: flex;
		align-items: center;
		color: #F82045;
		.a{
			padding: 0 4px;
		}
		.time{
			background: #F82045;
			border-radius: 2px;
			font-size: 12px;
			color: #FFFFFF;
			font-weight: 400;
			padding: 3px;
		}
	}
</style>